<template>
  <QuillEditor
    ref="editor"
    v-model:content="content"
    contentType="html" 
    theme="snow"
    toolbar="full"
    :options="options"
    @update:content="onchange"
  />
  <el-button @click="reset">reset</el-button>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const editor = ref(null)
const content = ref('<p style="vertical-align:inherit;max-width: 100%;min-height: 1em;font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif;letter-spacing: 0.544px;white-space: normal;background-color: rgb(255, 255, 255);box-sizing: border-box !important;overflow-wrap: break-word !important;"><strong style="max-width: 100%;letter-spacing: 0.544px;line-height: 27.2px;box-sizing: border-box !important;overflow-wrap: break-word !important;"><span style="max-width: 100%;font-size: 20px;color: #7B0C00;box-sizing: border-box !important;overflow-wrap: break-word !important;" >将象和，您专业的，靠谱的艾灸指导老师！</span></strong></p>')

const options = {
  modules: {
    clipboard: {
      // 粘贴版，处理粘贴时候的自带样式
      matchers: [
        [Node.ELEMENT_NODE, handlecustommatcher],
      ],
    }
  }
}

onMounted(() => {
  editor.value.getQuill().clipboard.addMatcher(Node.ELEMENT_NODE, handlecustommatcher)
})


function handlecustommatcher(node, delta) {
  console.log(node, delta)
  // 文字、图片等，从别处复制而来，清除自带样式，转为纯文本
  let ops = []
  delta.ops.forEach(op => {
    if (op.insert && typeof op.insert === 'string') {
      ops.push({
        insert: op.insert,
      })
    }
  })
  delta.ops = ops
  return delta
}

function reset() {
  content.value = ''
  editor.value.getQuill().setContents('')
}

watch(content, (content, prev) => {
  console.log(editor.value.getQuill())
})

function onchange(e: any) {
}
</script>